import { reactive, onMounted, onBeforeUnmount } from 'vue'

function usePoint() {
  // 实现鼠标“打点”的数据
  const point = reactive({
    x: 0,
    y: 0
  })

  // 实现鼠标“打点”的方法
  function savePoint(event) {
    point.x = event.pageX
    point.y = event.pageY
    console.log(event.pageX, event.pageY)
  }

  // 实现鼠标“打点”相关的生命周期钩子
  // 通过组合式API的形式去使用生命周期钩子
  onMounted(() => {
    console.log('---onMounted---')
    window.addEventListener('click', savePoint)
  })
  onBeforeUnmount(() => {
    console.log('---onBeforeUnmount---')
    window.removeEventListener('click', savePoint)
  })

  return point
}

export default usePoint